class Pagination {

    constructor({
        data,
        pageSize,
        $trg,
        $content
    }) {
        this.data = data;
        this._LENGTH = data.length;
        this.pageSize = pageSize;
        this.$trg = $trg;
        this._PAGINATIONDATA = {};

        this.ALLPAGE = Math.ceil(data.length / pageSize);
        this.cp = 0;

        this.$content = $content;
        this.init();
    }


    init() {
        this.initPaginationData();
        this.renderContent();
        if (this._LENGTH <= this.pageSize) {
            return
        } else {
            this.renderPaginationHtml();
            this.initPaginationEvent();
        }
    }

    initPaginationData() {
        if (this._LENGTH <= this.pageSize) {
            this._PAGINATIONDATA[0] = (this.data);
        } else {
            let trg_id = 0;
            for (let j = 0; j < this.ALLPAGE; j++) {
                this._PAGINATIONDATA[j] = [];
            }
            for (let j = 0; j < this._LENGTH; j++) {
                this._PAGINATIONDATA[trg_id].push(this.data[j]);
                if ((j + 1) % this.pageSize == 0) {
                    trg_id++;
                }
            }
        }
    }

    renderPaginationHtml() {
  
        let a = '';               
        let html = `
            <ul class="pagination">
                <li>
                <a class="previous" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
                </li>
                {htmlAVA}
                <li>
                <a class="next" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
                </li>
            </ul>
        `;

        for (let j = 0; j < this.ALLPAGE; j++) {
            if (j == 0) {
                a += `<li class="active"><a class="nav_" data-index='${j + 1}' href="#">${j + 1}</a></li>`
            } else {
                a += `<li><a class="nav_" data-index='${j + 1}' href="#">${j + 1}</a></li>`
            }
        }

        html = html.replace(/{htmlAVA}/g, a);
        this.$trg.append(html);
        this._$pig = $('.pagination');
    }


    initPaginationEvent() {
        //监听page 改变事件
        let self = this;
        this._$pig.on('click', 'li a.nav_', function() {
            let $par = $(this).parent();

            if(!$par.hasClass('active')) {
                let page = $(this).attr('data-index');
                self.cp = page - 1;
                self.renderContent();
                $par.addClass('active').siblings().removeClass('active');
            }
        });

        this._$pig.on('click', 'li a.previous', function() {
            let cp = self.cp;
            console.log('ddsd', cp)
            if(cp > 0) {
                console.log('xixi123123123123')
                self.cp = cp - 1;
                self.renderContent();
                self.updatePagination();
            }
        })

        this._$pig.on('click', 'li a.next', function() {
            let cp = self.cp;
            if(cp < self.ALLPAGE) {
                self.cp = cp + 1;
                self.renderContent();
                self.updatePagination();
            }
        })
    }

    updatePagination() {
        let cp = this.cp;
        let $trg = this._$pig.find('li a.nav_').eq(cp);
        let $par = $trg.parent();
        if(!$par.hasClass('active')) {
            $par.addClass('active').siblings().removeClass('active');
        }
    }

    renderContent(){
        this.$content.html(this._PAGINATIONDATA[this.cp]);
    }

}

export default Pagination